<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>学生信息</title>
    <!-- Bootstrap CSS-->
    <link rel="stylesheet" href="../../static/css/lib/bootstrap3.4.1.min.css" th:href="@{/css/lib/bootstrap3.4.1.min.css}">
    <!-- Bootstrap-table CSS-->
    <link rel="stylesheet" href="../../static/css/lib/bootstrap-table.min.css" th:href="@{/css/lib/bootstrap-table.min.css}">
    <!-- jquery-ui CSS-->
    <link rel="stylesheet" href="../../static/css/lib/jquery-ui.min.css" th:href="@{/css/lib/jquery-ui.min.css}">
    <!-- theme stylesheet-->
    <link rel="stylesheet" href="../../static/css/table.css" th:href="@{/css/table.css}">
</head>

<body onload="init();">

<div class="panel-body" style="padding-bottom:0;">
    <div class="panel panel-default">
        <div class="panel-heading">查询条件</div>
        <div class="panel-body">
            <div class="form-group" style="margin-top:15px">
                <div class="row row-gap">
                    <label class="control-label col-sm-2 label-font" for="txt_search_name" title="姓名">姓名</label>
                    <div class="col-sm-3">
                        <input type="text" class="form-control" id="txt_search_name">
                    </div>
                    <div class="col-sm-4" style="text-align:left;">
                        <button type="button" style="margin-left:50px" id="btn_filter" class="btn btn-primary" onclick="filter();">过滤</button>
                        <button type="button" style="margin-left:50px" id="btn_reset_filter" class="btn btn-primary" onclick="init();">重置过滤</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div id="toolbar" class="btn-group">
        <button id="btn_add" type="button" class="btn btn-default" data-toggle="modal" data-target="#addModal">
            <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>添加学生
        </button>
    </div>
    <table id="table"></table>
</div>

<!-- 模态框（Modal） 新增 -->
<div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="addModalLabel" aria-hidden="true">
    <div class="modal-dialog" style="min-width: 800px">
        <div class="modal-content">
            <div class="modal-header">
                <h2 class="modal-title text-center" id="addModalLabel">
                    添加学生信息
                </h2>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" role="form" onsubmit="return false;">

                    <div class="form-group has-success">
                        <label class="col-sm-2 control-label label-font" for="insert_input_name">姓名</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="insert_input_name" title="不能为空">
                        </div>
                    </div>

                    <div class="form-group has-success">
                        <label class="col-sm-2 control-label label-font" for="insert_input_age">年龄</label>
                        <div class="col-sm-10">
                            <input type="number" class="form-control" id="insert_input_age">
                        </div>
                    </div>

                    <div class="form-group has-success">
                        <label class="col-sm-2 control-label label-font" for="insert_input_sex">性别</label>
                        <div class="col-sm-10">
                            <select class="form-control" id="insert_input_sex">
                                <option value="男">男</option>
                                <option value="女">女</option>
                            </select>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-success" onclick="insert();">添加</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

<!--模态框（Modal） 编辑-->
<div class="modal fade" id="alterModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog" style="min-width: 800px">
        <div class="modal-content">
            <div class="modal-header">
                <h2 class="modal-title text-center" id="alterModalLabel">
                    编辑学生信息
                </h2>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" role="form" onsubmit="return false;">

                    <div class="form-group has-success">
                        <label class="col-sm-2 control-label label-font" for="alert_input_name">姓名</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="alert_input_name" title="不能为空">
                        </div>
                    </div>

                    <div class="form-group has-success">
                        <label class="col-sm-2 control-label label-font" for="alert_input_age">年龄</label>
                        <div class="col-sm-10">
                            <input type="number" class="form-control" id="alert_input_age">
                        </div>
                    </div>

                    <div class="form-group has-success">
                        <label class="col-sm-2 control-label label-font" for="alert_input_sex">性别</label>
                        <div class="col-sm-10">
                            <select class="form-control" id="alert_input_sex">
                                <option value="男">男</option>
                                <option value="女">女</option>
                            </select>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" onclick="alter()">编辑</button>
            </div>
        </div> <!--/.modal-content -->
    </div><!--/.modal-->
</div>

<!-- JavaScript files-->
<!-- jquery.js -->
<script src="../../static/js/lib/jquery.min.js" th:src="@{/js/lib/jquery.min.js}"></script>
<!-- Bootstrap.js -->
<script src="../../static/js/lib/bootstrap3.4.1.min.js" th:src="@{/js/lib/bootstrap3.4.1.min.js}"></script>
<!-- Bootstrap-table.js -->
<script src="../../static/js/lib/bootstrap-table.min.js" th:src="@{/js/lib/bootstrap-table.min.js}"></script>
<script src="../../static/js/lib/bootstrap-table-zh-CN.min.js" th:src="@{/js/lib/bootstrap-table-zh-CN.min.js}"></script>
<!-- sweetalert2.js -->
<script src="../../static/js/lib/sweetalert.min.js" th:src="@{/js/lib/sweetalert.min.js}"></script>
<script src="../../static/js/lib/es6-promise.auto.min.js" th:src="@{/js/lib/es6-promise.auto.min.js}"></script>
<!-- jquery-ui.js -->
<script src="../../static/js/lib/jquery-ui.min.js" th:src="@{/js/lib/jquery-ui.min.js}"></script>
<script src="../../static/js/common.js" th:src="@{/js/common.js}"></script>
<script src="../../static/js/dragModel.js" th:src="@{/js/dragModel.js}"></script>
<script>
    /** 初始化 */
    let $table = $('#table');

    changeToolTip();

    // 服务器分页获取数据
    function getServerPaging(node, url, queryParams) {
        initTable(node, url, [10, 25, 50, 100, "All"], queryParams, [{
            checkbox: true
        }, {
            field: 'name',
            title: '姓名',
            width: "170px",
            formatter: stringFormatter
        }, {
            field: 'age',
            title: '年龄',
            width: '70px',
            formatter: stringFormatter
        }, {
            field: 'sex',
            title: '性别',
            width: '70px',
            align: "center",
            formatter: value => null === value ? "" : "男" === value ? '<span title="男" class="label label-success">男</span>' : '<span title="女" class="label label-warning">女</span>'
        }, {
            field: 'createTime',
            title: '创建时间',
            width: "170px",
            formatter: dateFormatter
        }, {
            field: 'updateTime',
            title: '修改时间',
            width: "170px",
            formatter: dateFormatter
        }, {
            field: 'operation',
            title: '操作',
            width: '170px',
            formatter: operateFormatter // 自定义方法，添加操作按钮
        }]);
    }

    function operateFormatter(value, row, index) {  // 赋予的参数
        return [
            '<button class="btn btn-primary view" data-toggle="modal" data-target="#alterModal" onclick="initUpdate('+ index +');">编辑</button>&nbsp;&nbsp;'+
            '<button class="btn btn-danger view"  onclick="deleteOne('+ index +');">删除</button>'
        ].join('');
    }

    function init() {
        getServerPaging($table, "/student/getStudent", params => {
            return { limit: params.limit, offset: params.offset, sort: "create_time", order: "DESC" };
        });
    }

    function filter() {
        let data = {
            name: $("#txt_search_name").val()
        };
        if ("" === data.name) {
            swal("操作提示", "请填写过滤参数", "info");
            return;
        }
        getServerPaging($table, "/student/getStudent", params => {
            return { limit: params.limit, offset: params.offset, sort: "create_time", order: "DESC", name: data.name};
        });
    }

    dragTheModalDialog();
    function insert() {
        let data = {
            name: $('#insert_input_name').val(),
            age: $('#insert_input_age').val(),
            sex: $('#insert_input_sex').val()
        };
        if ("" === data.name) {
            swal("操作提示", "姓名不能为空", "info");
        } else if (data.age <= 0 || data.age >= 200) {
            swal("操作提示", "年龄不合法", "info");
        } else {
            parameterPostRequest("/student/insert", data, () => {
                $('#addModal').modal('hide');
                swal("正确", "添加成功", "success");
                init();
            });
        }
    }
    
    function deleteOne(index) {
        dialog("确定删除吗？", () => {
            let data = { id: $table.bootstrapTable('getData')[index].id };
            parameterPostRequest("/student/delete", data, () => {
                swal("正确", "删除成功", "success");
                init();
            });
        });
    }

    // alter记录id
    let alterId;
    function initUpdate(index) {
        let rows = $table.bootstrapTable('getData');
        $('#alert_input_name').val(rows[index].name);
        $('#alert_input_age').val(rows[index].age);
        $('#alert_input_sex').val(rows[index].sex);
        alterId = rows[index].id;
    }
    
    function alter() {
        let data = {
            id: alterId,
            name: $('#alert_input_name').val(),
            age: $('#alert_input_age').val(),
            sex: $('#alert_input_sex').val()
        };
        if ("" === data.id) {
            swal("操作提示", "用户不存在", "info");
        } else if ("" === data.name) {
            swal("操作提示", "姓名不能为空", "info");
        } else if (data.age <= 0 || data.age >= 200) {
            swal("操作提示", "年龄不合法", "info");
        } else {
            parameterPostRequest("/student/update", data, () => {
                $('#alterModal').modal('hide');
                swal("正确", "编辑成功", "success");
                init();
            });
        }
    }

</script>
</body>
</html>